<template>
	<div class="login">

		<div class="round1"></div>
		<div class="round2"></div>
		<div class="round3"></div>
		<div class="round4"></div>
		<div class="login-title">现在登录</div>
		<view class="text">登录即可享受各项服务内容，助力公主王子成功上岸</view>
		<view @click="login" class="but-login">登 录</view>
		<view @click="back" class="concel">取 消</view>
	</div>
</template>

<script>
	import {wxLogin} from'@/utils/api.js'
	export default {
		components: {

		},
		props: {

		},
		mounted() {

		},
		data() {
			return {

			};
		},
		methods: {
			blurInput() {

			},
			login() {
				uni.showLoading({
					title: '登录中'
				});

				uni.login({
					provider: 'weixin', //使用微信登录
					success: async (loginRes) => {
						console.log('loginRes555', loginRes.code);
						let res = await wxLogin({code:loginRes.code})
						uni.hideLoading();
						if(res.code == 200) {
							uni.setStorageSync('userInfo', res.loginUser);
							uni.setStorageSync('token', res.token);
							this.$store.commit('changeToken',res.token)
							this.$store.commit('changeUserInfo',res.loginUser)
							uni.showToast({
								title: '登录成功',
								duration: 1000
							});
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						}
						return
						uni.request({
							url: util.baseUrl + '/wxapi/user/login',
							data: {
								code: loginRes.code,
								
							},
							method: 'POST',
							success: (res) => {
								console.log(res.data);
								
								
								userInfo.value = res.data.data
								if (!userInfo.value.avatarUrl) {
									activatePopup.value.open()
								} else {
									uni.showToast({
										title: '登录成功',
										duration: 1000
									});
									setTimeout(() => {
										uni.navigateBack()
									}, 1000)
								}


							},
							fail: () => {
								uni.hideLoading();
							}
						});
					}
				});
			}
		},
		onReachBottom() {

		}
	};
</script>

<style lang="scss">
	.login {
		overflow: hidden;
		height: 100vh;
		background-color: #fff;

		.uni-popup__wrapper {
			border-radius: 20rpx;
		}

		.popup-content {
			position: relative;
			padding: 30rpx 50rpx;
			width: 500rpx;
			height: 600rpx;
			border-radius: 10rpx;

			.logo {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
			}

			.form-box {
				margin-top: 150rpx;

				.title {
					text-align: center;
					margin-bottom: 20rpx;
				}

				.row {
					position: relative;
					height: 100rpx;
					line-height: 100rpx;
					display: flex;
					padding-bottom: 10rpx;
					border-bottom: 2rpx solid #bfbfbf;

					.label {
						width: 100rpx;
					}

					input {
						line-height: 100rpx;
						height: 100rpx;
					}

					.avatar-wrapper {
						width: 100%;
						height: 100rpx;
						color: #333 !important;
						text-align: center !important;
						border: none !important;
						border-radius: 0 !important;
						background-color: transparent !important;
					}

					.avatar-wrapper::after {
						border: none !important;
					}

					image {
						position: absolute;
						right: 0rpx;
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
					}

				}
			}



			.acButton {
				width: 300rpx;
				height: 80rpx;
				line-height: 80rpx;
				background-color: #ffc637;
				font-size: 36rpx;
				font-weight: 700;
				color: #3a2e27;
				text-align: center;
				border-radius: 40rpx;
				margin: 0 auto;
				margin-top: 20rpx;
			}
		}

		.round1 {
			position: absolute;
			top: 50rpx;
			left: -60rpx;
			background-color: #fdd624;
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}

		.round2 {
			position: absolute;
			right: 50rpx;
			top: 100rpx;
			width: 80rpx;
			height: 80rpx;
			opacity: 1;
			background: rgba(252, 210, 46, 1);
			border-radius: 50%;
		}

		.round3 {
			position: absolute;
			right: -75rpx;
			top: 120rpx;
			width: 150rpx;
			height: 150rpx;
			opacity: 1;
			background: rgba(245, 189, 5, 0.36);
			border-radius: 50%;
		}

		.round4 {
			position: absolute;
			right: 20rpx;
			top: 150rpx;
			width: 200rpx;
			height: 200rpx;
			opacity: 1;
			background: rgba(219, 201, 33, 0.27);
			border-radius: 50%;
		}

		.login-title {
			position: absolute;
			left: 30rpx;
			top: 200rpx;
			font-size: 50rpx;
			font-weight: 700;
		}

		.but-login,
		.concel {

			// height: 60rpx;
			border-radius: 30rpx;
			font-weight: 700;
			height: 80rpx;
			line-height: 80rpx;
			width: 620rpx;
			margin: 0 auto;
			/// font-size: 28rpx;
			// line-height: 60rpx;
			text-align: center;
		}

		.but-login {
			background: linear-gradient(to left, #fdd21f, #ffe537);
			margin-bottom: 30rpx;
			color: #371636;
		}

		.concel {
			background-color: #ededed !important;
		}

		.text {
			margin-top: 280rpx;
			margin-bottom: 50rpx;
			font-size: 30rpx;
			color: #646464;
			width: 100%;
			text-align: center;
		}
	}
</style>